<!--多条件搜索-->
<form nz-form [formGroup]="formModel">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="outTradeNo">订单号</nz-form-label>
        <nz-form-control [nzSpan]="16">
            <input type="text" id="outTradeNo" nz-input formControlName="outTradeNo" placeholder="请输入订单号"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择合作伙伴">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>


    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>


    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">场地</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName"
                       [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">订单状态</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择订单状态" formControlName="status">
              <nz-option nzLabel="不限" nzValue="-1"></nz-option>
              <nz-option nzLabel="成功" nzValue="1"></nz-option>
              <nz-option nzLabel="待支付" nzValue="0"></nz-option>
              <nz-option nzLabel="关闭" nzValue="2"></nz-option>
              <nz-option nzLabel="撤单" nzValue="3"></nz-option>
              <nz-option nzLabel="部分退款" nzValue="6"></nz-option>
              <nz-option nzLabel="全额退款" nzValue="7"></nz-option>
              <nz-option nzLabel="退款中" nzValue="8"></nz-option>
              <nz-option nzLabel="退款失败" nzValue="9"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">下单开始时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="startDateTimeType" [nzAllowClear]="true" [date]="startDateTime"
                              (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">下单结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [nzAllowClear]="true" [date]="endDateTime"
                              (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">收款类型</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择收款类型" formControlName="mchType">
              <nz-option nzLabel="不限" nzValue="-1"></nz-option>
              <nz-option nzLabel="自有商户" nzValue="1"></nz-option>
              <!--              <nz-option nzLabel="平台" nzValue="2"></nz-option>-->
              <nz-option nzLabel="现金支付" nzValue="3"></nz-option>
              <nz-option nzLabel="余额支付" nzValue="4"></nz-option>
              <nz-option nzLabel="抖音团购" nzValue="5"></nz-option>
              <nz-option nzLabel="美团团购" nzValue="6"></nz-option>
              <nz-option nzLabel="线下收款码" nzValue="7"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">支付开始时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="startDateTimeType" [nzAllowClear]="true" [date]="gmtPaymentStart"
                              (event)="gmtPaymentTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">支付结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [nzAllowClear]="true" [date]="gmtPaymentEnd"
                              (event)="gmtPaymentTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入设备号">
          <input type="text" id="deviceNo" nz-input formControlName="deviceNo" placeholder="请输入设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">会员ID</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入会员ID">
          <input type="number" id="memberId" onkeyup="value=value.replace(/[^\d]/g,'')"
                 onblur="value=value.replace(/[^\d]/g,'')" nz-input formControlName="memberId"
                 placeholder="请输入会员ID"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6"
         *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">商户号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入设备号">
          <input type="text" id="merchant" nz-input formControlName="merchantId" placeholder="请输入商户号"/>
        </nz-form-control>
      </nz-form-item>
    </div>
<!--    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom" [ngClass]="isMobile? '': 'padding-left'" (click)="submitForm()">-->
<!--      <button  nz-button nzType="primary" class="button_search"><i nz-icon nzType="search" nzTheme="outline"></i>导出-->
<!--      </button>-->
<!--    </div>-->
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom" [ngClass]="isMobile? '': 'padding-left'" >
      <button (click)="submitForm()" *ngIf="!isMobile" nz-button nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
      <button (click)="submitForm()" *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
      <button (click)="exportCsv()" *ngIf="!isMobile" nz-button nzType="primary" style="margin-left: 10px" class="button_search">
        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
      </button>
      <button (click)="exportCsv()" *ngIf="isMobile" nz-button style="margin-top: 5px"  nzBlock nzType="primary" class="button_search">
        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
      </button>
    </div>
<!--    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom" [ngClass]="isMobile? '': 'padding-left'" >-->
<!--      <button (click)="exportCsv()" *ngIf="!isMobile" nz-button  nzType="primary" style="margin-left: 10px" class="button_search">-->
<!--        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出-->
<!--      </button>-->
<!--      <button (click)="exportCsv()" *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search">-->
<!--        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出-->
<!--      </button>-->
<!--    </div>-->
  </div>
</form>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">

  <div class="toolbar">
    <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="8" nzSm="8" nzMd="14" nzLg="14" nzXl="18">
      <button (click)="pastStatistic()" class="margin-right" nz-button nzType="primary">
        <i nz-icon nzType="box-plot" nzTheme="outline"></i>
        <span *ngIf="!isMobile">查询往期汇总</span>
      </button>

      <button nz-button nzType="primary" (click)="statisticQuery()">
        <i nz-icon nzType="fund" nzTheme="outline"></i><span *ngIf="!isMobile">查询当前汇总</span>
      </button>
    </div>


  </div>


  <div class="statis" *ngIf="showStatistic">
    <span class="item">
      订单总金额：<span class="text-red">{{orderStatistic?.successMoney | emptyCheckPipe:2 }}</span>
      （
      <span class="">
        线上扫码金额：<span class="text-red">{{orderStatistic?.turnoverOnLine | emptyCheckPipe:2 }}</span>
      </span>
      <span class="">
        ，现金金额：<span class="text-red">{{orderStatistic?.turnoverOffline | emptyCheckPipe:2 }}</span>
      </span>
      <span class="">
        ，抖音核销金额：<span class="text-red">{{orderStatistic?.turnoverDouYin | emptyCheckPipe:2 }}</span>
      </span>
      <span class="">
        ，美团核销金额：<span class="text-red">{{orderStatistic?.turnoverMeiTuan | emptyCheckPipe:2 }}</span>
      </span>
      <span class="">
        ，线下收款码金额：<span class="text-red">{{orderStatistic?.turnoverOfflineCardScanCode | emptyCheckPipe:2 }}</span>
      </span>
      ）
    </span>
    <span class="item">
      游戏币： <span class="text-red">{{orderStatistic?.saleCoinTotal}}
      / {{orderStatistic?.giveCoinTotal }}
      <span *ngIf="orderStatistic?.giveCoinTotal!=null">(赠送)</span>
    </span>
    </span>
    <span class="item">
      服务费：<span class="text-red">{{orderStatistic?.feeMoney | emptyCheckPipe:2}}</span>
    </span>
<!--    <span class="item">-->
<!--      节假日结算手续费（预估）：<span class="text-red">{{orderStatistic?.settlementFee | emptyCheckPipe:2}}</span>-->
<!--    </span>-->
    <span class="item">
      结算：<span class="text-red">{{orderStatistic?.settlementTotal | emptyCheckPipe:2 }}</span>
    </span>

    <span class="item" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
      渠道返佣：<span class="text-red">{{orderStatistic?.totalCommission  | emptyCheckPipe:2 }}</span>
    </span>
    <span class="item"
          *ngIf="userInfo.roleId == roleIdEnum.AGENT || userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
      利润：<span class="text-red">{{orderStatistic?.realCommissionTotal | emptyCheckPipe:2 }}</span>
    </span>

  </div>

  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th>时间 / 订单号</th>
      <th>第三方订单号</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">合作伙伴</th>
      <th>运营商</th>
      <th>操作人</th>
      <th>场地</th>
      <th>下单设备</th>
      <th>商品</th>
      <th>订单金额</th>
      <th>订单状态</th>
      <th>购买会员</th>
      <ng-container
        *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
        <th>总分润</th>
        <th>下级分润</th>
        <th>实得分润</th>
      </ng-container>
      <th>服务费</th>
      <th>实收金额</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
        收款类型
      </th>
      <th>储存类型</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzEllipsis>
          <div>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
          <div>{{ data.outTradeNo }}</div>
          <div (click)="checkOutTradeNo(data)"
               *ngIf="data.deviceTypeId == deviceTypeEnum.VENDING_MACHINE ||
                      data.deviceTypeId == deviceTypeEnum.SCREEN_VENDING_MACHINE ||
                      data.deviceTypeId == deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE">
              <a>查看出货订单</a>
          </div>
        </td>
        <td nzEllipsis>
          <div>{{ data.payChannelOrderNo }}</div>
        </td>
        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
          <div>{{ data.agencyName }}</div>
          <div class="text-sm text-grey">{{ data.agencyNo}}</div>
        </td>
        <td nzEllipsis>
          <div *ngIf="data.username">
            <div>{{data.username}}</div>
            <div class="text-sm text-grey">{{data.name}}</div>
          </div>
          <span *ngIf="!data.username"><nz-tag nzColor="success">微信授权</nz-tag></span>
        </td>
        <td nzEllipsis>
          <div *ngIf="data.operationUserName">
            <div>{{data.operationUserName}}</div>
            <div class="text-sm text-grey">
                {{data.operationName?data.operationName:data.operationNickName}}
            </div>
          </div>
        </td>
        <td nzEllipsis>
          {{ data.storeName }}
          <div (click)="checkBranInFo(data)"><a>查场地客服信息</a></div>
        </td>
        <td nzEllipsis>
          <div>{{data.deviceNo}}</div>
          <div>{{data.deviceTypeName}}</div>
        </td>
        <td nzEllipsis><a (click)="checkCommodityInFo(data)">{{ data.body }}</a></td>
        <td nzEllipsis>{{ data.totalAmount }}</td>
        <td nzEllipsis (click)="skipCoin(data.id,endDateTime,startDateTime)" class="suspension-status">
          <div>
            <span [ngStyle]="{'color':'#f50'}" *ngIf="data.status ==0">未付款</span>
            <span [ngStyle]="{'color':'#87d068'}" *ngIf="data.status ==1">支付成功</span>
            <span [ngStyle]="{'color':'#2db7f5'}" *ngIf="data.status ==2">订单关闭</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==3">订单撤销</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==4">订单退款</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==6">部分退款</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==7">全额退款</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==8">退款中</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==9">退款失败</span>
          </div>
          <div *ngIf="data.reordStatus">
            <nz-tag *ngIf="data.reordStatus==1 && (data.deviceTypeId==3 || data.deviceTypeId==16)" [nzColor]="'#87d068'">
              出币成功
            </nz-tag>
            <nz-tag *ngIf="data.reordStatus==1 && (data.deviceTypeId!=3 && data.deviceTypeId!=16)" [nzColor]="'green'">
              到账成功
            </nz-tag>
            <nz-tag *ngIf="data.reordStatus!=1 && (data.deviceTypeId==3 || data.deviceTypeId==16)" [nzColor]="'#F50'">
              出币失败
            </nz-tag>
            <nz-tag *ngIf="data.reordStatus!=1 && (data.deviceTypeId!=3 && data.deviceTypeId!=16)" [nzColor]="'red'">
              到账失败
            </nz-tag>
          </div>
<!--          <div>-->
<!--            <nz-tag *ngIf="data.status==1 && (data.deviceTypeId==3 || data.deviceTypeId==16)" [nzColor]="'#87d068'">-->
<!--              出币成功-->
<!--            </nz-tag>-->
<!--            <nz-tag *ngIf="data.status==1 && (data.deviceTypeId!=3 && data.deviceTypeId!=16)" [nzColor]="'green'">-->
<!--              投币成功-->
<!--            </nz-tag>-->
<!--            <nz-tag *ngIf="data.status==5 && (data.deviceTypeId==3 || data.deviceTypeId==16)" [nzColor]="'#F50'">-->
<!--              出币失败-->
<!--            </nz-tag>-->
<!--            <nz-tag *ngIf="data.status==5 && (data.deviceTypeId!=3 && data.deviceTypeId!=16)" [nzColor]="'red'">-->
<!--              投币失败-->
<!--            </nz-tag>-->
<!--          </div>-->
        </td>
        <td nzEllipsis (click)="skipUser(data.memberId)" class="suspension-status">
          <div class="user-info">
            <nz-avatar nzSize="large" [nzSrc]="data.headImgUrl" nzIcon="user" class="user-avatar"></nz-avatar>
            <div>
              <div>ID：{{ data.memberId }}</div>
              <div>
                <label *ngIf="data.nickName != null">{{ data.nickName}}</label>
                <label *ngIf="data.nickName == null">{{ data.zfbUserId}}</label>
              </div>
            </div>
          </div>
        </td>
        <ng-container
          *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
          <td nzEllipsis>{{data.commissionTotal |  emptyCheckPipe:2}}</td>
          <td nzEllipsis>{{data.lowerCommission |  emptyCheckPipe:2}}</td>
          <td nzEllipsis>{{data.realCommission |  emptyCheckPipe:2}}</td>
        </ng-container>
        <td nzEllipsis>{{ data.handlingCharge |  emptyCheckPipe:2 }}</td>
        <td nzEllipsis>{{ data.settlementMoney |  emptyCheckPipe:2}}</td>
        <td>
          <div *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
            <span *ngIf="data.mchType == 1">自有商户</span>
            <span *ngIf="data.mchType == 2">平台</span>
            <span *ngIf="data.mchType == 3">现金</span>
          </div>
          <div *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
            {{ data.merchantId}}
          </div>
        </td>
        <td nzEllipsis>
          <div *ngIf="data.typeOfArrival == 1">存储在余额</div>
          <div *ngIf="data.typeOfArrival == 2">直接出币/核销</div>
          <div *ngIf="data.typeOfArrival == 3">仅收银</div>
          <div *ngIf="data.typeOfArrival == 4">仅核销</div>
          <div *ngIf="data.typeOfArrival == 5">收银台吧台兑币机</div>
        </td>
        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
          <ng-container
            *ngIf="data.status != 0 && data.status != 2 && data.status != 3  && data.status !=7 && data.status != 8 && data.mchType != 3 ">
            <a title="退款" (click)="refund(data)">
              <img src="assets/svg/refund.svg" alt="退款" class="ig_sg">
            </a>
          </ng-container>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>
<app-refund [isVisible]="isVisible" [orderRefund]="orderRefund" (emit)="setVisible($event)"></app-refund>
<app-site-customer-service-info [isVisibleBranInfo]="isVisibleBranInfo" [store]="store" (emit)="setVisibleBranInfo($event)"></app-site-customer-service-info>
<app-commodity-info [isVisibleCommodityInfo]="isVisibleCommodityInfo" [store]="store" (emit)="setVisibleCommodityInfo($event)"></app-commodity-info>


